<template>
	<view class="coupon-item">
		<view class="coupon-left">
			<view class="coupon-info">
				<view class="coupon-name">{{item.name}}</view>
				<view class="coupon-condition">{{item.content}}</view>
			</view>
		</view>
		<view class="coupon-right">
			<view class="coupon-pacie">{{item.money}}</view>
			<button class="cu-btn coupon-button" :class="item.is_coupon==3?'show':''" v-if="!mode" @click="receiveChang(item)">{{item.is_coupon==3?'已领取':'领取'}}</button>
			<button class="cu-btn coupon-button" :class="disabled?'show':''" :disabled="disabled" v-else @click="useChang(item)">{{coup_info.id==item.id?'取消使用':'立即使用'}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			coup_data:{
				type:Object,
				default:(()=>{
					return {}
				})
			},
			item:{
				type:Object,
				default:(()=>{
					return {}
				})
			},
			mode:{
				type:String,
				default:''
			},
			disabled:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				
			};
		},
		computed:{
			coup_info(){
				return this.coup_data || {}
			}
		},
		methods:{
			receiveChang(i){
				if(i.is_coupon==3)return
				uni.showModal({
					title: '提示',
					content: '确认领取该优惠券?',
					success:(res) =>{
						if (res.confirm) {
							this.$network('/api/coupon/receive',{
								id:i.id
							}).then(res=>{
								if(res.code==1){
									this.$u.toast('领取成功')
									i.is_coupon = 3
								}
							})
						} else if (res.cancel) {
							this.$u.toast('已取消领取')
						}
					}
				});
			},
			useChang(e){
				if(this.mode == 3){
					this.$emit('couponChang',e)
					return
				}
				if(this.mode == 1){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.coupon-item{
	width: 100%;
	display: flex;
	align-items: initial;
	justify-content: space-between;
	min-height: 190rpx;
	border-radius: 15px;
	margin-top: 20rpx;
	background: rgba(255,180,0,0.1);
	.coupon-right{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.coupon-button{
			padding: 0 20rpx;
			margin: 0;
			min-width: 130rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 24px;
			color: #FFF;
			font-size: 28rpx;
			background-color: #ffb400;
			&.show{
				background-color: #dadada;
				color: #999;
			}
		}
		.coupon-pacie{
			font-size: 60rpx;
			font-weight: bold;
			color: #e03e36;
			position: relative;
		}
		.coupon-pacie::after{
			position: absolute;
			content: "￥";
			    top: 3px;
			    left: -12px;
			font-size: 28rpx;
			font-weight: bold;
			color: #e03e36;
		}
	}
	.coupon-left::after{
		position: absolute;
		content:'';
		right: -12px;
		top: -5px;
		background: #FFF;
		width: 20px;
		height: 12px;
		border-radius: 24px;
	}
	.coupon-left{
		width: 60%;
		display: flex;
		align-items: center;
		padding-left: 20px;
		border-right: 3px dashed #dadada;
		position: relative;
		.coupon-info{
			.coupon-name{
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
			}
			.coupon-condition{
				font-size: 25rpx;
				color: #999;
				margin-top: 5px;
			}
		}
	}
}
</style>
